<template>
  <div class="wid">
    <el-form :model="ruleForm" :inline="true" label-width="130px" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="基本信息" class="label-zi" style="width:100%;display: flex;"> </el-form-item>
            <el-form-item label="申请人" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="申请人编号：" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="部门：" prop="uname">
                 <el-select v-model="options" placeholder="请选择">
                   <el-option
                    v-for="item in optionsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联项目：" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="加班时间" prop="uname">
                <el-date-picker 
                    v-model="headTiem"
                    type="daterange"
                    :clearable="false"
                    @change="changeHeadTiem()"
                    range-separator="-"
                    start-placeholder="起始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="加班事项：" style="width:100%;display: flex;" prop="uname">
                <el-input type="textarea" rows="2" placeholder="" v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="补贴信息" class="label-zi" style="width:100%;display: flex;"> </el-form-item>
             <el-form-item label="补贴金额：" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="增加成本：" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="是否调休：" prop="uname">
                 <el-radio-group v-model="radio">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="流程处理" class="label-zi" style="width:100%;display: flex;"> </el-form-item>
            <el-form-item label="抄送：" style="width:100%;display: flex;" prop="uname">
                <el-input v-model="ruleForm.uname" >
                    <div class="right-icon" @click="dialogVisible=true" slot="append" title="选择人员"><i class="iconfont el-icon-user-solid"></i></div>
                </el-input>
            </el-form-item>
            <el-form-item label="即将流向：" style="width:100%;display: flex;" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="处理意见：" style="width:100%;display: flex;" prop="uname">
                <el-input type="textarea" rows="4" placeholder="请输入" v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label=" " style="width:100%;">
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button  @click="submitForm('ruleForm')">取消</el-button>
                <el-button type="info" @click="submitForm('ruleForm')">存草稿</el-button>
            </el-form-item>
    </el-form>
    <el-dialog title="选择抄送人" :visible.sync="dialogVisible" width="30%">
        <div>
            <el-input placeholder="输入关键字进行搜索" v-model="filterText" class="serchTree"> </el-input>
            <el-tree 
                class="filter-tree" 
                show-checkbox
                node-key="id"
                :data="data" 
                :props="defaultProps" 
                default-expand-all 
                :filter-node-method="filterNode" 
                ref="tree"> 

            </el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        data: [{
            id: 1,
            label: '一级 1',
            children: [{
                id: 4,
                label: '二级 1-1',
                children: [{
                id: 9,
                label: '三级 1-1-1'
                }, {
                id: 10,
                label: '三级 1-1-2'
                }]
            }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
            id: 3,
            label: '一级 3',
            children: [{
                id: 7,
                label: '二级 3-1'
            }, {
                id: 8,
                label: '二级 3-2'
            }]
        }],
        dialogVisible:false,//选中人员
        ruleForm:{
            uname:'',
        },
        rules: {
            uname: [
                { required: true, message: '请输入申请人', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
        },
        radio:1,
        optionsList: [{
          value: '技术部',
          label: '技术部'
        }, {
          value: '销售部',
          label: '销售部'
        }, {
          value: '产品部',
          label: '产品部'
        }],
        options: '',
        number:'',
        tableData: [{
            number: '1',
            content: '',
            resource: '',
            unit:"",
            times:'',
            remark:'',
            num:''
        }
       ]
      };
    },
    mounted() {},
    methods: {
        changeHeadTiem(){
            let time = this.utils.time(this.headTiem)
        },
        addFrom(){
            let obj ={
                number: '1',
                content: '',
                resource: '',
                unit:"",
                times:'',
                remark:'',
                num:''
            }
            this.tableData.push(obj)
        }
    },

  }

</script>
<style lang='scss' scoped>
.label-zi{
    ::v-deep.el-form-item__label{
        font-size: 18px;
    }
}
::v-deep.el-radio-group{
    width: 200px;
    border: 1px solid #DCDFE6;
    height: 40px;
    line-height: 50px;
    outline: 0;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 4px;
}
    .wid{
        width: 100%;
        background: #F5F5F5;
        min-height: calc(100vh - 130px);
        .demo-ruleForm{
            background: #fff;
            padding: 20px;
            border-radius: 8px;
        }
        .right-icon{
            cursor: pointer;
            padding: 0 20px;
            height: 100%;
        }
        .label-zi{
            ::v-deep.el-form-item__label{
                font-size: 18px;
            }
        }
        .file-box{
            .file{
                display: flex;
                min-width: 300px;
                span{
                    margin-right: 50px;
                }
                .a-likn{
                    color: #1890FF;
                    cursor: pointer;
                    margin-left: 10px;
                }
            }
        }
        ::v-deep{
            .el-form-item__content{
                flex: 1;
            }
            .el-input-group__append{
                padding: 0;
            }
            .el-form-item__content{
                margin: 0 auto;
            }
        }
    }
.serchTree{
    margin-bottom: 40px;
}
</style>